<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>ScrollMagic Namespaces</title>
	
  <script src="scripts/prettify/prettify.js"> </script>
  <script src="scripts/prettify/lang-css.js"> </script>
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
	<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
	<link rel="shortcut icon" href="../assets/img/favicon.ico" type="image/x-icon">

	
	<link type="text/css" rel="stylesheet" href="styles/site.cosmo.css">
	
</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="index.html">ScrollMagic</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Controller.html">Controller</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html">Scene</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Scene.html#event:add">add</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:change">change</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:destroy">destroy</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:end">end</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:enter">enter</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:leave">leave</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:progress">progress</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:remove">remove</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:shift">shift</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:start">start</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:update">update</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="mixins.list.html" class="dropdown-toggle" data-toggle="dropdown">Plugins<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="animation.GSAP.html">GSAP</a>
						</li>
						
						<li>
							<a href="animation.Velocity.html">Velocity</a>
						</li>
						
						<li>
							<a href="debug.addIndicators.html">addIndicators</a>
						</li>
						
						<li>
							<a href="framework.jQuery.html">jQuery</a>
						</li>
						

					</ul>
				</li>
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					


	<h1 class="page-title">
        Namespaces</h1>
    
<section>

<article>
    <div class="container-overview">
    

    
        

        
<dl class="details">
    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>


        
    
    </div>

    

    

    

    
        <h3 class="subsection-title">Classes</h3>

        <dl>
            <dt><a href="ScrollMagic.Controller.html">Controller</a></dt>
            <dd></dd>
        
            <dt><a href="ScrollMagic.Scene.html">Scene</a></dt>
            <dd></dd>
        </dl>
    

    
        <h3 class="subsection-title">Namespaces</h3>

        <dl>
            <dt><a href="namespaces.html#ScrollMagic"><a href="ScrollMagic.html">ScrollMagic</a></a></dt>
            <dd></dd>
        </dl>
    

    

    

    

    
        <h3 class="subsection-title">Events</h3>

        <dl>
            
<dt>
    <h4 class="name" id="event:add">add</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene add event.<br>Fires when the scene is added to a controller.<br>This is mostly used by plugins to know that change might be due.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>controller</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            

            

            <td class="description last"><p>The controller object the scene was added to.</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>2.0.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-192">line 192</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("add", function (event) {
	console.log('Scene was added to a new controller.');
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:change">change</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene change event.<br>Fires whenvever a property of the scene is changed.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>what</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates what value has been changed</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>newval</code></td>
            

            <td class="type">
            
                
<span class="param-type">mixed</span>


            
            </td>

            

            

            <td class="description last"><p>The new value of the changed property</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-130">line 130</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("change", function (event) {
	console.log("Scene Property \"" + event.what + "\" changed to " + event.newval);
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:destroy">destroy</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene destroy event.<br>Fires whenvever the scene is destroyed.<br>This can be used to tidy up custom behaviour used in events.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>reset</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates if the destroy method was called with reset <code>true</code> or <code>false</code>.</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>1.1.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-167">line 167</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("enter", function (event) {
       // add custom action
       $("#my-elem").left("200");
     })
     .on("destroy", function (event) {
       // reset my element to start position
       if (event.reset) {
         $("#my-elem").left("0");
       }
     });</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:end">end</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene end event.<br>Fires whenever the scroll position its the ending point of the scene.<br>It will also fire when scrolling back up from after the scene and going over its end position. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene <code>&quot;DURING&quot;</code> or <code>&quot;AFTER&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-29">line 29</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("end", function (event) {
	console.log("Hit end point of scene.");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:enter">enter</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene enter event.<br>Fires whenever the scene enters the &quot;DURING&quot; state.<br>Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene enters its active scroll timeframe, regardless of the scroll-direction.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene - always <code>&quot;DURING&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-50">line 50</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("enter", function (event) {
	console.log("Scene entered.");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:leave">leave</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene leave event.<br>Fires whenever the scene's state goes from &quot;DURING&quot; to either &quot;BEFORE&quot; or &quot;AFTER&quot;.<br>Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene leaves its active scroll timeframe, regardless of the scroll-direction.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene <code>&quot;BEFORE&quot;</code> or <code>&quot;AFTER&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-71">line 71</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("leave", function (event) {
	console.log("Scene left.");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:progress">progress</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene progress event.<br>Fires whenever the progress of the scene changes.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene <code>&quot;BEFORE&quot;</code>, <code>&quot;DURING&quot;</code> or <code>&quot;AFTER&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-110">line 110</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("progress", function (event) {
	console.log("Scene progress changed to " + event.progress);
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:remove">remove</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene remove event.<br>Fires when the scene is removed from a controller.<br>This is mostly used by plugins to know that change might be due.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>2.0.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-210">line 210</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("remove", function (event) {
	console.log('Scene was removed from its controller.');
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:shift">shift</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene shift event.<br>Fires whenvever the start or end <strong>scroll offset</strong> of the scene change.<br>This happens explicitely, when one of these values change: <code>offset</code>, <code>duration</code> or <code>triggerHook</code>.<br>It will fire implicitly when the <code>triggerElement</code> changes, if the new element has a different position (most cases).<br>It will also fire implicitly when the size of the container changes and the triggerHook is anything other than <code>onLeave</code>.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>reason</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates why the scene has shifted</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>1.1.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-147">line 147</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("shift", function (event) {
	console.log("Scene moved, because the " + event.reason + " has changed.)");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:start">start</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene start event.<br>Fires whenever the scroll position its the starting point of the scene.<br>It will also fire when scrolling back up going over the start position of the scene. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene <code>&quot;BEFORE&quot;</code> or <code>&quot;DURING&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-8">line 8</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("start", function (event) {
	console.log("Hit start point of scene.");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:update">update</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene update event.<br>Fires whenever the scene is updated (but not necessarily changes the progress).</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>startPos</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>The starting position of the scene (in relation to the conainer)</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>endPos</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>The ending position of the scene (in relation to the conainer)</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollPos</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>The current scroll position of the container</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-92">line 92</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("update", function (event) {
	console.log("Scene updated.");
});</pre>


    
</dd>

        </dl>
    
</article>

</section>




				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		© Jan Paepke 2015
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc" target="_blank">JSDoc 3.5.5</a>
		using a customized version of the <a href="https://github.com/terryweiss/docstrap" target="_blank">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<div class="span3">
				<div id="toc"></div>
			</div>
			
			<br clear="both">
		</div>

	</div>
	<script src="scripts/sunlight.js"></script>
	<script src="scripts/sunlight.javascript.js"></script>
	<script src="scripts/sunlight-plugin.doclinks.js"></script>
	<script src="scripts/sunlight-plugin.linenumbers.js"></script>
	<script src="scripts/sunlight-plugin.menu.js"></script>
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.scrollTo.js"></script>
	<script src="scripts/jquery.localScroll.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>

	<script> prettyPrint(); </script>
	<script>  Sunlight.highlightAll({lineNumbers:true,  showMenu: true, enableDoclinks :true}); </script>

	<script>
		function openDeeplinkedElement (skipAni) {
			try {
				$("dt h4.member-collapsed").filter(window.location.hash.substring(1).replace(":", "\\:")).trigger("click", skipAni);
			} catch (e) {
				console.warn("ah ah ah! :p");
			}
		}
		$( function () {
			$( "#toc" ).toc( {
			    anchorName  : function(i, heading, prefix) {
					return $(heading).attr("id") || ( prefix + i );
				},
				selectors   : "h1:visible,h2:visible,h3:visible,h4:visible",
				onScrollFinish : openDeeplinkedElement,
				highlightOffset : 10,
				scrollOffset: 60
			} );
			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );

		} );
	</script>

	
	<script>
		$( function () {
			// $('#main').localScroll({
			// 	offset: { top: 56 } //offset by the height of your header (give or take a few px, see what works for you)
			// });
			// workaround for anchors below header...
			window.setTimeout(function () {
				$(document).scrollTop($(document).scrollTop()-60);
			}, 1)
			
			var hash = window.location.hash.substring(1).replace(":", "\\:");
			$( "dt h4.name" ).each( function () {
				var $this = $( this );
				var icon = $( "<i/>" ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" );
				var dt = $this.parents( "dt" );
				var children = dt.next( "dd" );

				$this.append( icon ).css( {cursor : "pointer"} );
				$this.addClass( "member-collapsed" ).addClass( "member" );
				if (hash != $this.attr("id")) {
					children.hide();
				}
				$this.toggle( function (e, skipAni) {
					var scrollPos = $(document).scrollTop();
					window.location.hash = $(this).attr("id");
					$(document).scrollTop(scrollPos);
					icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" );
					$this.addClass( "member-open" ).removeClass( "member-collapsed" );
					children.slideDown(skipAni ? 0 : undefined);
				}, function () {
					icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" );
					$this.addClass( "member-collapsed" ).removeClass( "member-open" );
					children.slideUp();
				} );
			} );
			// open if deeplinked
			if (hash.length > 0)
				openDeeplinkedElement(true);
		} );
	</script>
	

	<script type="text/javascript" src="../assets/js/tracking.js"></script>
</body>
</html>